import React, { useEffect, useState } from 'react';
import { Tabs } from 'antd';
import { renderComponent } from '@/utils/ImportCom.js'
import { tabConfigList } from './config.js'

function Base() {
  let [isShow, setIsShow] = useState(false)
  let [tabList, setTabList] = useState([])

  useEffect(() => {
    async function loadCom() {
      let res = await Promise.all(tabConfigList.map(async (item) => {
        return {
          ...item,
          children: await renderComponent(item.component.name, item.component.url)
        }
      })).then(obj => {
        return obj
      });
      setTabList(res)
      setIsShow(true)
    }
    loadCom();
  }, [])

  return (
    <div>
      

      {isShow && <Tabs
        defaultActiveKey="1"
        items={tabList.map((item) => ({
          ...item,
          key: item.component.name,
          children: item.children,
        }))}
      />}


    </div>
  );
}

export default Base;
